﻿<template>
  <swiper :options="swiperOption" class="swiper_btn">
    <swiper-slide v-for="slide in swiperSlides">
		<div class="wrap_img">
			<div class="wrap_img_box" v-on:click="wrap_click_img(slide.id)">
                <img v-bind:src="slide.images">
                <p class="wrap_img_box_name">
                  火烧明信片
                </p>
                <p class="wrap_img_box_list">
                  好有创意的火烧名信片，求带走
                </p>
                <div class="wrap_img_box_last_list">
                    <div>积分:</div>
                    <div class="wrap_img_dot">100点</div>
                </div>
                <div class="wrap_img_box_last_list">
                  <div>需赚:</div>
                  <div class="wrap_img_dot">100个</div>
                </div>
			</div>
            <div class="wrap_img_box">

            </div>
            
		</div>
	</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev">
      
    </div>
    <div class="swiper-button-next" slot="button-next">
      
    </div>
  </swiper>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          autoplay: 3500,
          setWrapperSize :true,
          //pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents: true,
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
        },
        swiperSlides:[],
        img_base:""
      }
    },
    ...mapActions([
      "thom_redirect",
    ]),
    ...mapMutations([
      "header_scroll_nav"
    ]),
    mounted() {
      this.img_base = this.$store.getters.get_img_base;
      //console.log("img++++++")
      //console.log(this.img_base)
      let id = sessionStorage.getItem("user_id")
      //console.log("+++++++++++++++++++++++++===1111111111111")
      console.log(id)
     // /api/user / tokenExchange / getOfficialposts
      Indicator.open();
      this.$http.all([
        this.$http.get('/api/user/getUserById?id=' + id),
        this.$http.get('/api/user/tokenExchange/getOfficialposts')
      ])
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then(this.$http.spread((user_id, offical) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          this.list = offical.data;
          this.num = user_id.data.integral;
          sessionStorage.setItem("school_id", user_id.data.school.id)
          console.log("++++++++++++++++++++++++++++++++++++==offical")
          console.log(offical.data)
          let change_list =[]
          for (let x = 0; x < offical.data.length; x++) {
            offical.data[x].images =  this.img_base + offical.data[x].images 
            console.log(offical.data[x].images)
          }
          this.swiperSlides = offical.data
          //this.header_scroll_nav(offical.data)
      
          setInterval(() => {
            //console.log('simulate async data')

            let swiperSlides = offical.data
            
            if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
          }, 3000)
         
        }))
    },
    methods:{
      wrap_click_img: function (id) {
       // alert(id)
        sessionStorage.setItem("off_post_id",id)
        this.$store.dispatch("thom_redirect",
          {
            name: "/Off_Gift", router: this.$router
          });
      }
    }
  }
</script>
<style scoped>
  .wrap_img_dot{
    //padding-right:10%;
  }
  .mar_top_1 {
    margin-top: 0.3rem;
  }
  .wrap_img_box_last_list {
    color: #9f5c2f;
    line-height: 1.2;
    font-size: 0.5rem;
    display: flex;
    padding-left:4%;
    padding-right:4%;
    justify-content:space-between;
  }
  .wrap_img_box_list {
    color: #9f9f9f;
    font-size: 0.5rem;
    padding-left: 4%;
    text-align: left;
    line-height: 1.2;
  }
  .wrap_img_box_name {
    font-size: 0.5rem;
    margin-top: 0.575rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 5%;
  } 
  .swiper-button-prev {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_left.png")
  }
  .swiper-button-next {
    user-select:none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_right.png")
  } 
  .swiper_btn {
    position: relative;
  }
  .wrap_img {
    width: 76vw;
    height: 8.4rem;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: space-between;
    border-radius:2vw;
    
  }
  .wrap_img_box{
		width:35vw;
		height:8.2rem;
		background-color:#fff;
		box-shadow:0 0 8px 2px rgba(181, 175, 175, 0.4);
		border-radius:2vw;
  }
  .wrap_img_box img{
    display:block;
    width:100%;
    height:4.2rem;
    border-radius:2vw 2vw 0 0 ;
  }
  .wrap_img_box:nth-child(2) {
    // margin-left:4vw;
  }
  .swiper_btn_left {
    position:absolute;
    left:1vw;
  }
  .swiper_btn_left img{
    display:block
  }
  .swiper_btn_left {
    position: absolute;
    right: 1vw;
  }
  .swiper_btn_left img{
    display:block;
  }
</style>